<template>
  <div>
    <el-container style="height: 1250px;border: 1px">
      <el-header align="center" style="height: 60px;background-color: #181a26">
        <div id="inputElement">
          <a href="https://gitee.com/" target="_blank"><img :src="imgSrc" style="width: 100px;height: 40px"></a>
          <a href="https://chishenme.xyz/" target="_blank"> <i
              class="el-icon-chicken"
              style="color: #5fb2ee;font-size: 40px;margin-top: 10px"></i></a>
          <a href="https://game.yiqujing.com/social/lifeRestart/view/index.html" target="_blank"> <i
              class="el-icon-dessert"
              style="color: #5feea7;font-size: 40px;margin-top: 10px"></i></a>
          <a href="https://www.saolei123.com/" target="_blank"> <i
              class="el-icon-coffee"
              style="color: #695fee;font-size: 40px;margin-top: 10px"></i></a>
          <a href="https://www.shj.work/tools/secha/" target="_blank"> <i
              class="el-icon-cherry"
              style="color: #ee5f60;font-size: 40px;margin-top: 10px"></i></a>
        </div>
        <div id="inputElements">
          <a style="font-size: 20px;margin-top: 10px;color: #ffffff">YOUR NAME：{{ myname }} </a>
          <a> <i class="el-icon-switch-button"
              style="color: #ffffff;font-size: 27px;margin-top: 15px" @click="backuser"></i></a>
        </div>
      </el-header>
      <el-container>
        <el-aside style="background-color: #181a27" width="200px">
          <el-col :span="40">
            <el-menu
                background-color="#545457"
                router
                style="width: 200px"
                text-color="#372924FF">
              <el-submenu v-for="m in menus" :key="m.id" :index="m.id">
                <template slot="title">
                  <i class="el-icon-location" style="color: #ffffff"></i>
                  <span style="color: #ffffff">{{ m.name }}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item style="color: #bdbcbc" v-for="c in m.children" :key="c.id" :index="c.path">{{ c.name }}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
export default {
  name: "IndexView",
  data() {
    return {
      menus: [],
      imgSrc: require('../assets/gitee.png'),
      myname: sessionStorage.getItem("myname"),
      //2属性定义
      title:'',
    }
  },
  mounted() {
    this.initWebSocket()
  },
  unmounted: function() {
    this.websocketclose();
  },methods: {
    getMenus() {
      this.axios.post("menuservice/menu/getMenus").then(res => {
        this.menus = res.data.data;
      })
    },backuser(){
      sessionStorage.removeItem("token");
      this.$router.push("/login")
    },
    open() {
      const h = this.$createElement;
      this.$msgbox({
        title: this.title,
        message: h('p', null, [
          h('span', null,  null),
          h('i', { style: 'color: teal' }, null)
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '执行中...';
            this.$router.push('sell')
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 100);
            }, 100);
          } else {
            done();
          }
        }
      }).then(action => {
        this.$message({
          type: 'info',
          message: 'action: ' + action
        });
      })
    },
    initWebSocket: function () {
      let userId = 1;
      let url = "ws://10.39.7.21:8182/websocket/"+userId;
      this.websocket = new WebSocket(url);
      this.websocket.onopen = this.websocketonopen;
      this.websocket.send = this.websocketsend;
      this.websocket.onerror = this.websocketerror;
      this.websocket.onmessage = this.websocketonmessage;
      this.websocket.onclose = this.websocketclose;
    },
    websocketonopen: function() {
      console.log("Websocket 连接成功")
    },
    websocketerror: function() {
      console.log("Websocket 连接错误")
    },
    websocketsend: function (e) {
      console.log("Websocket 发送消息错误 ： " + e.message)
    },
    websocketonmessage: function(e) {
      this.title = e.data;
      this.open();
      console.log(e.data);
    },
    websocketclose: function (e) {
      console.log("connection closed (" + e.code + ")")
    }

  },
  props: {
    msg: String

  }, created() {
    this.getMenus();
    //4.钩子函数
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}


body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
#inputElement{
  width: 260px;
  height: 40px;
  position: absolute;
  top: 10px;
  left: 15px;
}
#inputElements{
  width: 260px;
  height: 40px;
  position: absolute;
  top: 10px;
  right: 20px;
}
</style>